<template>
  <div class="border-box">
    <span v-for="n in 8" :key="n" :class="[n > 4 ? 'h' : 'w', 'span' + n, 'span']"></span>
    <slot></slot>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.border-box{
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 12.28px;
  color: #03BBFF;
  display: flex;
  justify-content: center;
  align-items: center;
  .span{
    position: absolute;
    z-index: 1;
    background: #00EDFE;
    &.w{
      width: 3.8px;
      height: 1px;
    }
    &.h{
      width: 1px;
      height: 3.8px;
    }
    &.span1{
      left: -1px;
      top: -1px;
    }
    &.span2{
      right: -1px;
      top: -1px;
    }
    &.span3{
      left: -1px;
      bottom: -1px;
    }
    &.span4{
      right: -1px;
      bottom: -1px;
    }
    &.span5{
      left: -1px;
      top: -1px;
    }
    &.span6{
      right: -1px;
      top: -1px;
    }
    &.span7{
      left: -1px;
      bottom: -1px;
    }
    &.span8{
      right: -1px;
      bottom: -1px;
    }
  }
}
</style>
